import React, { useState } from 'react';
import { Form, Row, Col, Tooltip } from 'antd';
import { Post } from '@/containers';
import OrganizationSelect from '@/components/OrganizationSelect';
import { renderFormItem, renderFormText } from '@/utils/utils';

const formatDepartmentName = fullOrganizationName => {
    const nameArr = fullOrganizationName?.split('/') || [];
    if (nameArr.length < 4) {
        return fullOrganizationName;
    }
    nameArr.splice(1, nameArr.length - 3, '...');
    return nameArr.join(' / ');
};
const formatOriginDepartmentName = fullOrganizationName => {
    const nameArr = fullOrganizationName?.split('/') || [];
    nameArr.splice(0, 1);
    return nameArr.join(' / ');
};

const getTreeFullName = node => {
    const ary = [];
    let current = node;
    while (current) {
        ary.push(current.organizationName);
        current = current.parentNode;
    }
    return ary.reverse().join('/');
};

const Content = ({ form, formValueMap = {}, checkEditable }) => {
    const { getFieldDecorator, setFieldsValue, getFieldValue } = form;
    const [disableFlag, setDisableFlag] = useState(true);

    React.useEffect(() => {
        setFieldsValue({ transferToDutyCode: undefined });
        // 选择新组织机构后，才可选择新岗位
        if (getFieldValue('transferToOrganizationCode')) {
            setDisableFlag(false);
        } else {
            setDisableFlag(true);
        }
    }, [getFieldValue('transferToOrganizationCode')]);

    return (
        <Row>
            <Row>
                <Col span={12}>
                    <Form.Item label="原组织机构">
                        <Tooltip title={renderFormText(formatOriginDepartmentName(formValueMap.fullOrganizationName))}>
                            {renderFormText(
                                formatDepartmentName(formatOriginDepartmentName(formValueMap.fullOrganizationName))
                            )}
                        </Tooltip>
                    </Form.Item>
                </Col>
                <Col span={12}>
                    <Form.Item label="新组织机构">
                        {renderFormItem(
                            getFieldDecorator('transferToOrganizationCode', {
                                initialValue: formValueMap.transferToOrganizationCode || undefined,
                                rules: [{ required: true, message: '请输入新组织机构' }]
                            })(
                                <OrganizationSelect
                                    isFunctional
                                    onSelect={(code, node = {}) => {
                                        console.log(node.props, 'xxx---');
                                        setFieldsValue({
                                            transferToOrganizationName: node.props.organizationName,
                                            transferToFullOrganizationName: getTreeFullName(node.props)
                                        });
                                    }}
                                    extraQuery={{ organizationPermissions: 0, auditStatus: 2 }}
                                />
                            ),
                            <Tooltip
                                title={
                                    formValueMap.transferToFullOrganizationName ||
                                    formValueMap.transferToOrganizationName
                                }
                            >
                                {formatDepartmentName(
                                    formValueMap.transferToFullOrganizationName ||
                                        formValueMap.transferToOrganizationName
                                )}
                            </Tooltip>,
                            checkEditable('transferToOrganizationCode')
                        )}
                    </Form.Item>
                </Col>
            </Row>
            <Row>
                <Col span={12}>
                    <Form.Item label="原岗位">{renderFormText(formValueMap.currentDutyName)}</Form.Item>
                </Col>
                <Col span={12}>
                    <Form.Item label="新岗位">
                        {renderFormItem(
                            getFieldDecorator('transferToDutyCode', {
                                initialValue: formValueMap.transferToDutyCode || undefined,
                                rules: [{ required: true, message: '请输入新岗位' }]
                            })(
                                <Post
                                    code={
                                        getFieldValue('transferToOrganizationCode') ??
                                        formValueMap.transferToOrganizationCode
                                    }
                                    extraQuery={{
                                        auditStatuses: [2]
                                    }}
                                    onSelect={(code, node = {}) => {
                                        const { props = {} } = node;
                                        setFieldsValue({ transferToDutyName: props.label });
                                    }}
                                    excludeOptions={[formValueMap.currentDutyCode]}
                                    placeholder="请选择或输入"
                                    disableFlag={disableFlag}
                                    noAuth
                                    style={{ width: '100%' }}
                                />
                            ),
                            formValueMap.transferToDutyName,
                            checkEditable('transferToDutyCode')
                        )}
                    </Form.Item>
                </Col>
            </Row>
        </Row>
    );
};

export default Content;
